//引入nav home page
var Nav = require('component/nav.jsx');
var Home = require('pages/home.jsx');
var Page = require('pages/page.jsx');

//创建app组件
var App = React.createClass({
    //定义属性类型
    propTypes:{
      //key是属性名称
      //  value是定义类型
        page: React.PropTypes.string.isRequired
    },
    //定义状态
    getInitialState:function () {
      var page = {
          home : 'none',
          start: 'none',
          css : 'none',
          component : 'none',
          javascript: 'none',
          maker : 'none'
      }
      //默认显示首页
        //根据属性数据决定显隐

        page[this.props.page] = 'block'
      return{
          page : page
      }
    },
    //定义获取选中页面的方法
    getShowPage:function () {
      //在状态数据中，找到选中的页面
        for(var i in this.state.page){
            //如果属性值为block就是被选中的
            if(this.state.page[i] === 'block'){
                //i是状态数据中，属性名称，表示页面
                return i;
            }
        }
    },
    //定义传递给子组件的方法
    updateParentPage:function (id) {
        // console.log(id)
        //更新父组件page状态数据信息
        var page = this.state.page;
        //排他法，其他属性都是none，id属性是block
        for(var i in page){
            page[i]='none';
            }
            page[id]='block';
        //更新状态数据
        this.setState({
            page : page
        })
    },
   render:function () {
        //缓存状态数据
       var page = this.state.page;
       //渲染页面
       return(
           <div>
               {/*定义nav组件*/}
               <Nav page={this.getShowPage()} updateParentPage={this.updateParentPage}></Nav>
               <Home show={page.home}></Home>
               <Page show={page.start} title="起步" intro="Bootstrap提供了几种可以帮你快速上手的方式，每种方式针对具有不同技能等级的开发者和不同的使用场景" url="data/start.json"></Page>
               <Page show={page.css} title="CSS样式" intro="CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化" url="data/css.json"></Page>
               <Page show={page.component} title="组件" intro="组件（Component）是对数据和方法的简单封装" url="data/component.json"></Page>
               <Page show={page.javascript} title="JavaScript" intro="JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型" url="data/js.json"></Page>
               <Page show={page.maker} title="定制" intro="迎合了人们追求品质和个性的心理，定制才是真正的个性化消费" url="data/download.json"></Page>
           </div>
       )
   } 
});
module.exports = App;

